// 权限列表
import React, {Component, Fragment} from 'react';
import Header from './Header';
import JurisdictionTableList from './JurisdictionTableList';
import {connect} from 'react-redux';
import action from '../../store/actions/jurisdictionList';

import '../../../node_modules/animate.css/animate.css';
import {Pagination} from 'antd';

class JurisdictionList extends Component {
  state = {
    visible: false,
    data: {},
    current: 1
  };
  // 抽屉打开
  showDrawer = () => {
    this.setState(prevState => {
      return {
        visible: true
      };
    });

  };

  // 抽屉关闭
  onClose = () => {
    this.setState(prevState => {
      return {
        visible: false,
        data: {}
      };
    });
  };

  // 编辑
  jurisdictionEdit = data => {
    console.log(data);
    this.setState(prevState => {
      return {
        visible: true,
        data
      };
    });
  };

  pageChange = page => {
    this.setState({
      current: page
    });
    this.props.GET_JURISDICTION_LIST(page);
  };

  componentDidMount() {
    this.props.GET_JURISDICTION_LIST();
  }

  render() {
    const {data, visible} = this.state;
    const {jurisdictionList, jurisdictionPageSize} = this.props;
    return (
      <div className='animated slideInDown'>
        <Header
          data={data}
          visible={visible}
          onClose={this.onClose}
          showDrawer={this.showDrawer}
        />
        <JurisdictionTableList jurisdictionList={jurisdictionList} jurisdictionEdit={this.jurisdictionEdit}/>
        <Pagination
          current={this.state.current}
          onChange={this.pageChange}
          pageSize={20}
          total={jurisdictionPageSize ? jurisdictionPageSize : 1}
          style={{textAlign: 'center', marginTop: '20px'}}
          hideOnSinglePage
        />
      </div>
    );
  }
}

const mapStateToProps = state => state.jurisdictionList;
export default connect(mapStateToProps, action)(JurisdictionList);
